<template>
  <div
    class="content-wrap"
    :style="{
      paddingRight:
        dataTypeTabsId == 1 || isTableList || dataTypeTabsId == 4
          ? 0
          : '2.87rem',
    }"
    v-loading="loading"
    element-loading-text="拼命加载中..."
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0,0,0,0.3)"
  >
    <div class="content">
      <dataTypeTabs @toggleTabs="toggleTabs" :tabs="tabs" />
      <div
        class="btn-con flex-center-start"
        v-if="dataTypeTabsId != 4"
        :class="[dataTypeTabsId == 1 || dataTypeTabsId == 4 ? 'btnn' : '']"
      >
        <div class="flex-center-start">
          <div
            class="btn flex-center"
            @click="addInfo"
            :style="{
              zIndex: dataTypeTabsId == 1 || dataTypeTabsId == 4 ? '999' : '0',
            }"
          >
            <div class="icon add"></div>
            <span>新增</span>
          </div>
          <!-- <div class="btn flex-center" @click="selectAll">
          <div class="icon all"></div>
          <span>全选</span>
        </div> -->
          <div
            class="btn flex-center"
            @click="extractDoc"
            v-if="dataTypeTabsId != 1"
          >
            <div class="icon extract"></div>
            <span>{{ dataTypeTabsId == 2 ? "提取图片" : "提取视频" }}</span>
          </div>
          <!-- <div class="btn flex-center" @click="multiUpload">
            <em class="el-icon-upload2" />批量上传图片
          </div> -->
        </div>
      </div>
      <div class="search-con flex-center-start" v-show="dataTypeTabsId != 4">
        <el-tooltip effect="dark" content="点击切换" placement="bottom">
          <div
            v-show="dataTypeTabsId === 2 || dataTypeTabsId === 3"
            class="icon-tran"
            :class="[isTableList ? 'table' : '']"
            @click="showTableList"
          ></div>
        </el-tooltip>
        <el-select
          size="mini"
          v-model="sensorValue"
          placeholder="请选择传感器"
          v-show="this.dataTypeTabsId === 2"
          clearable
        >
          <el-option
            :label="item.name"
            :value="item.id"
            v-for="(item, index) in sensorTypeList"
            :key="index"
          >
          </el-option>
        </el-select>
        <el-select
          v-show="this.dataTypeTabsId != 1"
          size="mini"
          v-model="fileTypeValue"
          placeholder="请选择文件类别"
          clearable
        >
          <el-option
            :label="item.categoryName"
            :value="item.id"
            v-for="(item, index) in fileTypeList"
            :key="index"
          >
          </el-option>
        </el-select>
        <el-select
          v-show="this.dataTypeTabsId != 1"
          size="mini"
          v-model="dataTypeValue"
          placeholder="请选择数据类别"
          clearable
        >
          <el-option
            :label="item.name"
            :value="item.id"
            v-for="(item, index) in dataTypeList"
            :key="index"
          >
          </el-option>
        </el-select>
        <!-- 时间检索 -->
        <div
          class="pro-search pro-datePicker"
          v-show="this.dataTypeTabsId === 2 || this.dataTypeTabsId === 3"
        >
          <el-date-picker
            size="mini"
            v-model="datePickerVal"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
          >
          </el-date-picker>
        </div>
        <div
          class="search-wrap flex-center-start"
          v-show="this.dataTypeTabsId === 3"
        >
          <div class="icon-search"></div>
          <el-input
            size="mini"
            maxlength="100"
            type="text"
            placeholder="请输入标题"
            v-model="videoTitle"
          />
        </div>
        <div
          class="search-wrap flex-center-start"
          :style="{
            marginLeft:
              dataTypeTabsId == 1 || dataTypeTabsId == 4 ? '1.26rem' : '0',
          }"
        >
          <div class="icon-search"></div>
          <el-input
            size="mini"
            maxlength="100"
            type="text"
            placeholder="请输入文件名称"
            v-model="picName"
          />
        </div>
        <!-- <div class="icon-sort"></div> -->
        <div
          class="search-wrap flex-center-start"
          v-show="this.dataTypeTabsId != 1"
        >
          <div class="icon-search"></div>
          <el-input
            size="mini"
            maxlength="100"
            type="text"
            placeholder="请输入文件来源"
            v-model="source"
          />
        </div>
        <!-- <div
          class="search-wrap flex-center-start"
          v-if="this.dataTypeTabsId === 3"
        >
          <div class="icon-search"></div>
          <el-input size="mini"
            maxlength="100"
            type="text"
            placeholder="请输入视频名称"
            v-model="picName"
          />
        </div> -->
        <!-- <div
          class="search-wrap flex-center-start"
          v-if="this.dataTypeTabsId === 1"
        >
          <div class="icon-search"></div>
          <el-input size="mini"
            maxlength="100"
            type="text"
            placeholder="请输入内容"
            v-model="picName"
          />
        </div> -->
        <el-button type="primary" size="mini" @click="goSearch">搜索</el-button>
        <el-button type="primary" size="mini" @click="infoClean"
          >清空</el-button
        >
      </div>
      <imageVideoGroup
        v-show="!isTableList && dataTypeTabsId != 1 && dataTypeTabsId != 4"
        :imageVideoList="imageVideoList"
        :isImage="true"
        @deleteSuccess="deleteSuccess"
        @editTags="editTags"
        @reGetData="reGetData"
        ref="imageVideoGroup"
      />
      <imageVideoTableList
        :imageVideoList="imageVideoList"
        v-if="isTableList && dataTypeTabsId != 1 && dataTypeTabsId != 4"
        @deleteSuccess="deleteSuccess"
      />
      <!-- 资料列表 -->
      <dataManagementList
        @reGetData="reGetData"
        v-if="dataTypeTabsId == 1"
        ref="inforList"
        :dataInfoList="dataInfoList"
      />
      <pictureList v-if="dataTypeTabsId === 4"></pictureList>
      <!-- 提取文件弹窗 -->
      <el-dialog
        class="extract-doc"
        title="提取"
        :visible.sync="extractDialogVisible"
        @closed="progressClose"
      >
        <div class="top-progress flex-center">
          <div class="flex-center">
            <div class="tit">提取中</div>
            <el-progress
              :percentage="percentage"
              :format="format"
            ></el-progress>
          </div>
          <!-- <div class="flex-center">
          <div class="pause flex-center">
            <div class="icon"></div>
            <span>全部暂停</span>
          </div>
          <div class="begin flex-center">
            <div class="icon"></div>
            <span>全部开始</span>
          </div>
        </div> -->
        </div>
      </el-dialog>
      <!-- 资料的新增编辑 -->
      <editAddInfoDialog
        v-if="this.dataTypeTabsId == 1"
        style="position: absolute; top: 0; left: 0"
        ref="editAddInfoDialog"
        @reGetData="reGetData"
        @addDataInfo="addDataInfo"
      />
      <!-- 分页 -->
      <div class="image-pagination" v-show="dataTypeTabsId != 4">
        <el-pagination
          background
          small
          layout="prev, pager, next, total, jumper"
          :current-page="currentPage"
          :page-size="pageSize"
          :total="total"
          @current-change="handleCurrentChange"
          :key="paginationKey"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import dataTypeTabs from "@/components/common/dataTypeTabs.vue";
import imageVideoGroup from "@/components/imageVideo/imageVideoGroup.vue";
import imageVideoTableList from "@/components/imageVideo/tableList.vue";
import dataManagementList from "../components/information/dataManagementList";
import editAddInfoDialog from "../components/common/editAddInfoDialog";
import pictureList from "../components/picture/pictureList";
import { mapState } from "vuex";
export default {
  components: {
    dataTypeTabs, //  数据类型区分，图像，视屏，文档
    imageVideoGroup,
    dataManagementList,
    editAddInfoDialog,
    imageVideoTableList,
    pictureList,
    // 新增
  },
  data() {
    return {
      selectedTabId: 2,
      imageVideoList: [], // 图像，视频数据切换
      zcimageList: [], // 存储图片数据
      zcvideoList: [], // 存储视频数据
      dataInfoList: [], // 存储资料数据
      extractDialogVisible: false, // 提取弹窗
      isTableList: false, // 是否表格展示
      keyWords: "",
      percentage: 1,
      searchName: "",
      loading: false,
      datePickerVal: ["", ""],
      picName: "", // 文件名称
      source: "", // 文件来源
      videoTitle: "",
      sensorValue: "", // 传感器类型
      fileTypeValue: "", // 文件类型
      dataTypeValue: "", // 数据类别
      sensorTypeList: [],
      fileTypeList: [],
      dataTypeList: [
        { name: "原始数据", id: 0 },
        { name: "成果数据", id: 1 },
      ],
      addShow: true,
      tabs: [
        {
          name: "侦察图像",
          id: 2,
        },
        {
          name: "侦察视频",
          id: 3,
        },
        {
          name: "资料文档",
          id: 1,
        },
        {
          name: "图册管理",
          id: 4,
        },
      ],
      paginationKey: 0, // 解决currentPage 不动态绑定的问题
      currentPage: 1, // 分页
      total: 0,
      pageSize: 12,
      interval: 0,
    };
  },
  computed: {
    ...mapState({
      // 目标树选中值
      targetTreeChecked(state) {
        return state.app.targetTreeChecked;
      },
      dataTypeTabsId(state) {
        return state.app.dataTypeTabsId;
      },
      user(state) {
        return state.user;
      },
    }),
  },
  watch: {
    extractDialogVisible(n) {
      if (!n) {
        this.clearIntervalAll();
      }
    },
    targetTreeChecked() {
      this.getTargetData();
    },
    //文件类型1是资料2是图片3是视频
    dataTypeTabsId() {
      // 清空搜索
      // this.emptySearch();
      this.currentPage = 1;
      // 解决currentPage 不动态绑定的问题
      this.paginationKey = Math.random();
      this.getTargetData();
    },
    "$route.path": function (n, o) {
      if (o.indexOf("imagesVideoAddTable") > -1) {
        console.log(this.currentPage);
        // this.currentPage = 1;
        this.getTargetData(
          undefined,
          this.currentPage,
          undefined,
          undefined,
          undefined,
          undefined,
          undefined,
          undefined,
          undefined
        );
        // 目标树改回多选
        this.$store.commit("app/setTargetTreeIsSingle", false);
      }
    },
  },
  mounted() {},
  created() {
    // 当前登录用户为临时用户（专家用户）
    if (this.user.userRole == 3) {
      this.$router.push("/dataEvaluate");
      return;
    }
    // // 目标树改回多选
    // this.$store.commit("app/setTargetTreeIsSingle", false);
    // // this.getTargetData(this.targetTreeChecked);
    // // 搜索 下拉菜单数据
    // this.sensorType();
    // this.getFileType();
    // this.$store.dispatch("app/findAllTag");
  },
  activated() {
    this.getTargetData();
    // 目标树改回多选
    this.$store.commit("app/setTargetTreeIsSingle", false);
    // this.getTargetData(this.targetTreeChecked);
    // 搜索 下拉菜单数据
    this.sensorType();
    this.getFileType();
    this.$store.dispatch("app/findAllTag");
  },
  methods: {
    // 批量上传图片
    multiUpload() {
      let fileInput = document.createElement("input");
      fileInput.type = "file";
      document.body.appendChild(fileInput);
      fileInput.setAttribute("accept", "image/*");
      fileInput.id = "fileInput";
      fileInput.style.cssText = "display:none;";
      fileInput.webkitdirectory = true;
      fileInput.click();
      fileInput.addEventListener("change", (e) => {
        let isFilter = false;
        let isBigSize = false;
        let formData = new FormData();
        // 过滤 只能传图片
        e.target.files.forEach((element) => {
          const sizeLimit = element.size / 1024 / 1024 / 1024 < 1; //这里做文件大小限制 1GB!
          if (sizeLimit) {
            if (element.type.indexOf("image") !== -1) {
              formData.append("files", element);
            } else {
              isFilter = true;
            }
          } else {
            isBigSize = true;
          }
        });
        if (isFilter) {
          this.$notify({
            title: "提示",
            message: "已自动过滤该文件夹内非图片文件！",
            type: "success",
          });
        }
        if (isBigSize) {
          this.$notify({
            title: "提示",
            message: "已自动过滤该文件夹内超大文件！",
            type: "success",
          });
        }
        this.newLoading = this.$loading({
          lock: true,
          text: "努力上传中...",
          spinner: "el-icon-loading",
          background: "rgba(0, 0, 0, 0.7)",
        });
        this.$api
          .batchImport(formData)
          .then((res) => {
            this.newLoading.close();
            if (res.length == 0) {
              this.$message({
                message: "该文件夹内未匹配到图片文件！",
                type: "warning",
                showClose: true,
              });
              return;
            }

            this.multipleArr = res;
            this.fileDirName = e.target.files[0].webkitRelativePath.substring(
              0,
              e.target.files[0].webkitRelativePath.indexOf("/")
            );
          })
          .catch(() => {
            this.newLoading.close();
            this.$confirm("", "上传失败！", {
              confirmButtonText: "确定",
              showClose: false,
              closeOnClickModal: false,
              closeOnPressEscape: false,
              cancelButtonText: "",
              center: true,
              showCancelButton: false,
            }).then(() => {
              console.log("上传失败");
            });
          });
        fileInput.remove();
      });
    },
    // tab切换时 清空搜索内容
    emptySearch() {
      this.searchName = "";
      this.datePickerVal = ["", ""];
      this.picName = ""; //文件名称
      this.source = ""; // 文件来源
      this.videoTitle = "";
      this.sensorValue = ""; //传感器类型
      this.fileTypeValue = ""; //文件类型
      this.dataTypeValue = ""; // 数据类别
    },
    setPercentage() {
      this.percentage = 1;
      this.interval = setInterval(() => {
        if (this.percentage > 92) {
          this.percentage = 99;
        } else {
          this.percentage += 6 * Math.random();
          this.percentage = parseInt(this.percentage);
        }
      }, 300);
    },
    clearIntervalAll() {
      clearInterval(this.interval);
    },
    progressClose() {
      this.percentage = 1;
    },
    // 重新刷新接口
    reGetData() {
      this.getTargetData(
        undefined,
        undefined,
        undefined,
        undefined,
        undefined,
        undefined,
        undefined,
        undefined,
        undefined
      );
    },
    // 传感器类型
    async sensorType() {
      let data = await this.$api.sensorType();
      this.sensorTypeList = data;
    },
    // 文件类别
    async getFileType() {
      let data = await this.$api.getFileType();
      this.fileTypeList = data;
    },
    // inputChange(e) {
    //   this.searchName = e.target.value;
    //   if (!e.target.value) {
    //     this.getTargetData(this.targetTreeChecked);
    //   }
    // },
    // 搜索
    goSearch() {
      this.currentPage = 1;
      this.getTargetData(
        this.targetTreeChecked,
        1,
        this.pageSize,
        this.picName,
        this.datePickerVal[1],
        this.sensorValue,
        this.fileTypeValue,
        this.dataTypeValue,
        this.source,
        this.datePickerVal[0],
        this.videoTitle
      );
    },
    showTableList() {
      this.isTableList = !this.isTableList;
    },
    deleteSuccess(index) {
      this.imageVideoList.splice(index, 1);
      this.reGetData();
      this.$nextTick(() => {
        this.$message({
          message: "删除成功！",
          type: "success",
          showClose: true,
        });
      });
      // 由于接口返回数据太慢，这里不重新请求接口
      // this.getTargetData(this.targetTreeChecked, this.currentPage);
    },
    // 清空信息
    infoClean() {
      this.sensorValue = "";
      this.fileTypeValue = "";
      this.dataTypeValue = "";
      this.datePickerVal = "";
      this.picName = "";
      this.source = "";
      this.videoTitle = "";
      this.getTargetData();
    },
    async getTargetData(
      targetIdArr,
      pageNo,
      pageSize,
      picName,
      endTime,
      sensorValue,
      fileTypeValue,
      dataTypeValue,
      source,
      startTime,
      videoTitle
    ) {
      this.loading = true;
      let data = await this.$api.getTargetData({
        list: targetIdArr ? targetIdArr : this.targetTreeChecked,
        pageNo: pageNo ? pageNo : this.currentPage,
        pageSize: pageSize ? pageSize : this.pageSize,
        searchName: picName ? picName : this.picName,
        endTime: endTime ? endTime : this.datePickerVal[1],
        sensorType: sensorValue ? sensorValue : this.sensorValue,
        fileTypeId: fileTypeValue ? fileTypeValue : this.fileTypeValue,
        isProduct: dataTypeValue ? dataTypeValue : this.dataTypeValue,
        source: source ? source : this.source,
        startTime: startTime ? startTime : this.datePickerVal[0],
        videoTitle: videoTitle ? videoTitle : this.videoTitle,
        dataType: this.dataTypeTabsId,
      });
      this.loading = false;
      if (this.dataTypeTabsId == 2) {
        this.imageVideoList = data.zcimageList.list;
        this.total = data.zcimageList.total;
      } else if (this.dataTypeTabsId == 3) {
        this.imageVideoList = data.zcvideoList.list;
        this.total = data.zcvideoList.total;
      } else if (this.dataTypeTabsId == 1) {
        this.dataInfoList = data.dataInfoList.list;
        this.total = data.dataInfoList.total;
      }
      // 重新计算currentPage
      let totalPage = Math.ceil(this.total / this.pageSize);
      if (this.currentPage > totalPage) {
        this.currentPage = totalPage;
        this.reGetData();
      }
      // 解决currentPage 不动态绑定的问题
      this.paginationKey = Math.random();
    },
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage;
      this.getTargetData(
        this.targetTreeChecked,
        currentPage,
        this.pageSize,
        this.picName,
        this.datePickerVal[1],
        this.sensorValue,
        this.fileTypeValue,
        this.dataTypeValue,
        this.source,
        this.datePickerVal[0],
        this.videoTitle
      );
    },
    //  视屏，图像，资料 切换  文件类型1是资料2是图片3是视频
    toggleTabs(id) {
      this.selectedTabId = id;
    },
    selectAll() {
      if (this.dataTypeTabsId === 1) {
        this.$refs.inforList.allSelected();
      } else {
        this.$refs.imageVideoGroup.allSelected();
      }
    },
    //  提取文件
    extractDoc() {
      let fileInput = document.createElement("input");
      fileInput.type = "file";
      document.body.appendChild(fileInput);

      fileInput.setAttribute("accept", ".zip");
      fileInput.id = "fileInput";
      fileInput.style.cssText = "display:none;";
      fileInput.click();
      fileInput.addEventListener("change", (e) => {
        let formData = new FormData();
        formData.append("file", e.target.files[0]);
        this.extractDialogVisible = true;
        this.setPercentage();
        // 图像 视屏提取接口后端改成两个名称
        let extractName =
          this.dataTypeTabsId == 2 ? "extractImage" : "extractVideo";
        this.$api[extractName](formData)
          .then((res) => {
            if (res.indexOf("200") != -1) {
              this.extractDialogVisible = false;
              this.$confirm("", res.split(",")[1], {
                confirmButtonText: "确定",
                showClose: false,
                closeOnClickModal: false,
                closeOnPressEscape: false,
                center: true,
                showCancelButton: false,
              }).then(() => {
                this.$store.dispatch("app/findAllTag");
                this.reGetData();
              });
            } else {
              this.extractDialogVisible = false;
              this.$notify({
                title: "提示",
                message: res.split(",")[1],
                type: "warning",
              });
            }
          })
          .catch(() => {
            this.extractDialogVisible = false;
            this.$confirm("", "上传失败！", {
              confirmButtonText: "确定",
              showClose: false,
              closeOnClickModal: false,
              closeOnPressEscape: false,
              cancelButtonText: "",
              center: true,
              showCancelButton: false,
            }).then(() => {
              console.log("上传失败");
            });
          });
        fileInput.remove();
      });
    },
    // 新增
    addInfo() {
      if (this.dataTypeTabsId === 1) {
        this.$refs.editAddInfoDialog.openDialog();
        this.$refs.editAddInfoDialog.openDialog();
      } else {
        this.$router.push({
          name: "imagesVideoAddTable",
          params: {
            dataTypeTabsId: this.dataTypeTabsId,
            selectedTabId: this.dataTypeTabsId,
          },
        });
      }
    },
    format(percentage) {
      return percentage === 100 ? "满" : `${percentage}%`;
    },
    addDataInfo(dataList) {
      this.dataInfoList = dataList;
    },
    // 搜索
    search() {
      if (this.selectedTabId === 1) {
        if (this.keyWords === "") {
          this.getTargetData(this.targetTreeChecked);
        }
        this.$api
          .searchData({
            dataName: this.keyWords,
            targetType: "1",
          })
          .then((res) => {
            this.dataInfoList = res;
            this.keyWords = "";
          });
      }
    },
    // 添加标签
    editTags(e) {
      this.imageVideoList = e;
      if (this.dataTypeTabsId == 2) {
        this.zcimageList = e;
      }
      if (this.dataTypeTabsId == 3) {
        this.zcvideoList = e;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
@import "~@/styles/mixin.scss";
.content-wrap {
  height: calc(100vh - 0.6rem);
  // background: pink;
}
.btnn {
  position: absolute;
}
.content {
  padding-left: 0.1rem;
  // padding-right: 0.22rem;
  .btn-con {
    margin: 0.1rem 0 0 0;
    padding-right: 0.1rem;
    // position: absolute;
    .btn {
      cursor: pointer;
      margin-right: 0.1rem;
      width: 1.2rem;
      height: 0.36rem;
      // background: #999999;
      background: #1890ff;
      border-radius: 0.05rem;
      font-size: 0.14rem;
      color: #ffffff;
    }
    .icon {
      margin-right: 0.06rem;
      width: 0.16rem;
      height: 0.16rem;
      background-repeat: no-repeat;
      background-size: 100% 100%;
      background-position: center;
      &.add {
        background-image: url(~@/assets/common/add@2x.png);
      }
      &.all {
        background-image: url(~@/assets/common/check_all@2x.png);
      }
      &.extract {
        background-image: url(~@/assets/common/extract@2x.png);
      }
    }
    span {
      font-size: 0.16rem;
      font-family: Alibaba PuHuiTi;
      font-weight: 400;
      color: #ffffff;
    }
  }
  .search-con {
    margin-top: 0.1rem;
    margin-bottom: 0.1rem;
    position: relative;
    // width: 10.66rem;
    flex-grow: 1;
    // padding-right: 2.86rem;
    // margin-left: 1.25rem;
    &.flex-center-start > div {
      margin-right: 0.06rem !important;
    }
    &.flex-center-start > button {
      width: 0.6rem;
      padding-left: 0.1rem;
      padding-right: 0.1rem;
      margin-right: 0.06rem !important;
    }
    &.flex-center-start {
      .search-wrap {
        width: 3.6rem;
      }
    }
    .icon-tran {
      &.table {
        background-image: url(~@/assets/images/list_icon.png);
      }
      background-image: url(~@/assets/images/thumbnail_switch@2x.png);
      width: 0.18rem;
      height: 0.18rem;
      background-repeat: no-repeat;
      background-size: 100% 100%;
      background-position: center;
      position: absolute;
      top: -0.44rem;
      right: 0rem;
    }
    .icon-sort {
      background-image: url(~@/assets/images/thumbnail_switch@2x.png);
      width: 0.18rem;
      height: 0.18rem;
      background-repeat: no-repeat;
      background-size: 100% 100%;
      background-position: center;
    }
    ::v-deep.el-input.el-input--suffix {
      width: 1.9rem;
    }
    ::v-deep.el-input__inner {
      background: #034576;
      // height: 0.38rem;
      color: #ffffff;
      font-size: 0.14rem;
      // margin-right: 0.2rem;
      border: 1px solid #034576;
      padding: 0 6px;
    }
    ::v-deep.el-input__icon {
      // height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    ::v-deep.el-date-editor {
      // width: 3rem;
      width: 2.8rem;
      padding-left: 0.1rem !important;
      padding-right: 0.1rem !important;
      .el-range-separator {
        color: #f5f5f5;
        line-height: 18px;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      input {
        color: #f5f5f5;
      }
    }
    .search-wrap {
      // margin-left: 0.1rem;
      // margin-right: 0.2rem;
      // width: 3.44rem;
      width: 1.8rem;
      // height: 0.36rem;
      background: #034576;
      // border: 0.01rem solid #313030;
      font-size: 0.14rem;
      border-radius: 0.05rem;
      .icon-search {
        margin-left: 0.1rem;
        background-image: url(~@/assets/images/search@2x.png);
        width: 0.14rem;
        height: 0.15rem;
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
      }
      input {
        color: #fff;
        padding: 0 0.1rem;
        font-size: 0.14rem;
        width: 100%;
        height: 100%;
        display: block;
      }
    }
    .el-button {
      margin: 0;
    }
  }
  ::v-deep .extract-doc {
    .el-dialog {
      color: #ffffff;
      font-size: 0.16rem;
      width: 9.56rem !important;
      background: #474747;
      box-shadow: 0rem 0rem 0.38rem 0rem rgba(0, 0, 0, 0.45);
      border-radius: 0.05rem;
      .el-dialog__header {
        padding: 0.16rem;
        background: #143853 !important;
      }
      .el-dialog__title {
        color: #ffffff;
      }
      .el-dialog__body {
        color: #ffffff;
        background: #0f2d43 !important;
      }
      .top-progress {
        .el-progress {
          width: 7.5rem;
          margin-left: 0.08rem;
          .el-progress__text {
            color: #fff;
          }
        }
        .pause {
          width: 0.94rem;
          height: 0.28rem;
          background: #1890ff;
          border-radius: 0.05rem;
          .icon {
            margin-right: 0.06rem;
            width: 0.09rem;
            height: 0.14rem;
            background-image: url(~@/assets/common/extract@2x.png);
            background-repeat: no-repeat;
            background-size: 100% 100%;
            background-position: center;
          }
        }
        .begin {
          margin-left: 0.1rem;
          width: 0.94rem;
          height: 0.28rem;
          background: #62656c;
          border-radius: 0.05rem;
          .icon {
            margin-right: 0.06rem;
            width: 0.09rem;
            height: 0.14rem;
            background-image: url(~@/assets/common/extract@2x.png);
            background-repeat: no-repeat;
            background-size: 100% 100%;
            background-position: center;
          }
        }
      }
      .doc-list {
        font-size: 0.14rem;
        margin-top: 0.15rem;
        height: 3.5rem;
        overflow-y: scroll;
        // padding: 0 0.36rem;
        .item {
          height: 0.36rem;
          &.first {
            background: #2f2f2f;
          }
        }
        .son {
          width: 1rem;
          // background: pink;
        }
        .logo {
          margin-right: 0.1rem;
          width: 0.23rem;
          height: 0.18rem;
          background-image: url(~@/assets/images/no-pic@2x.png);
          background-repeat: no-repeat;
          background-size: 100% 100%;
          background-position: center;
        }
      }
      .footer {
        margin-top: 0.3rem;
        color: #ffffff;
        margin-right: 0.3rem;
        justify-content: flex-end;
        .cancel {
          text-align: center;
          width: 1.2rem;
          height: 0.38rem;
          line-height: 0.38rem;
          background: #62656c;
          border-radius: 0.05rem;
        }
        .confirm {
          margin-left: 0.2rem;
          text-align: center;
          width: 1.2rem;
          height: 0.38rem;
          line-height: 0.38rem;
          background: #1890ff;
          border-radius: 0.05rem;
        }
      }
    }
  }
}
</style>
<style lang="scss">
.image-pagination {
  position: absolute;
  bottom: 0;
  right: 0;
  margin-right: 2.87rem;
  .el-pagination.is-background .el-pager li:not(.disabled).active,
  .el-pagination.is-background .el-pager .number:hover,
  .el-pagination.is-background .btn-prev:hover,
  .el-pagination.is-background .btn-next:hover {
    background-color: #1890ff;
    color: #ffffff;
  }
  .el-pagination.is-background .btn-prev,
  .el-pagination.is-background .btn-next,
  .el-pagination.is-background .el-pager li {
    background-color: #034475;
    color: #ccc;
  }
  .el-pagination.is-background .btn-prev:hover .el-icon,
  .el-pagination.is-background .btn-next:hover .el-icon {
    color: #fff;
  }
  .el-pagination--small .el-pagination__editor.el-input .el-input__inner {
    background: #034475;
    border: 0px;
  }
  .el-pagination--small span:not([class*="suffix"]),
  .el-pagination--small button {
    color: #034475;
    margin-left: 20px;
  }
  .el-pagination.is-background .el-pagination__total,
  .el-pagination.is-background .el-pagination__jump {
    color: #1890ff;
    font-weight: 700;
  }
  .el-pagination.is-background .el-pagination__jump .el-input__inner {
    color: #fff;
  }
  .el-pagination .btn-prev .el-icon,
  .el-pagination .btn-next .el-icon {
    color: #ccc;
  }
}
/* .el-loading-spinner i {
  color: #1890ff !important;
} */
</style>
